<template>
  <div class="d-flex justify-center">
    <div class="position-re pt-10 pl-8" style="left: 10px">
      <div @click="$emit('click', index)" class="d-flex pb-4" v-for="(item, index) in list" :key="index">
        <v-img
          class="d-flex align-center text-center"
          :src="
            selectIndex === index
              ? require('./img/左侧按钮点击.png')
              : require('./img/左侧按钮未点击.png')
          "
        >
          <span class="white--text pr-4" style="font-size: 22px">{{ item.title }}</span>
        </v-img>
      </div>
    </div>
    <div>
      <v-img src="./img/person_abn_bg.png">
        <component class="pa-10" :is="`tempComponent${selectIndex}`"></component>
      </v-img>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  doc: {
    name: "选择页面框",
  },
  props: {
    height: {
      type: Number,
      default: 950,
    },
    list: {
      type: Array,
      default: () => [],
    },
    selectIndex: {
      type: Number,
      default: undefined,
    },
  },
  watch: {
    selectIndex: function (newVal) {
      Vue.component(`tempComponent${newVal}`, (resolve) => {
        require([`@/${this.list[newVal].url}`], resolve);
      });
    },
  },
  created() {
    Vue.component(`tempComponent${this.selectIndex}`, (resolve) => {
      require([`@/${this.list[this.selectIndex].url}`], resolve);
    });
  },
};
</script>
